<template>
	<view class="fl-s-c p-r-30">
		<view class="w-1">
			<view class="list-item fl-s-s" v-for="(item,index) in list" :key="index">
				<view class="w-1 fr-b-c fs-22" style="color: #999999;">
					<text>{{item.creattime}}</text>
					<text>{{item.order_no}}</text>
				</view>
				<view class="w-1 fr-b-c fs-30" style="margin-top: 16rpx;">
					<text style="color: #333333;">{{item.type}}</text>
					<text style="color: #FA360A;">{{item.recharge_status}}</text>
				</view>
				<view class="fr-b-c w-1 m-t-30">
					<view class="flex-1 fl-b-s fs-26" style="min-height: 120rpx; color: #999999;">
						<text>物品：{{item.zh_goods}}</text>
						<text class="text-line-2">说明：{{item.desc}}。</text>
					</view>
					<image :src="item.zh_img" mode="aspectFill" class="goodsImage"></image>
				</view>
			</view>
		</view>
		
		<view class="m-t-250" v-if="nodata">
			<u-empty mode="data"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				size:20,
				total:0,
				list:[],
				nodata:false
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.getList(false)
		},
		onReachBottom() {
			if(this.list.length<this.total){
				this.page++
				this.getList()
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			// 获取接口数据
			getList(loading=true){
				this.$get({
					url:'/zhihuan/zhihuan_list',
					data:{
						page:this.page,
						access_token:uni.getStorageSync('access_token'),
						size:this.size
					},
					loading
				}).then(res=>{
					this.list = this.page==1?res.data.list:[...this.list,...res.data.list]
					this.total = res.data.page_total
					this.nodata = !this.list.length
				}).catch(err=>{
					this.list = []
					this.total = 0
					this.nodata = !this.list.length
				})
			}
		}
	}
</script>

<style>
	.list-item{
		padding: 28rpx 0;
		border-bottom: 1rpx solid #F0F0F0;
	}
	.goodsImage{
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 48rpx;
	}
</style>
